//开发环境webpack配置
const {resolve} = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode:"development",
    entry:"./src/main.js",
    output:{
        filename:"js/build.js",
        path:resolve(__dirname,"build")
    },
    module:{
        rules:[     
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
              },
            // //处理css 
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            // 处理less
            {
                test:/\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
            // // 处理html 
            {
                test:/\.html$/,
                use:["html-loader"]
            },
            //处理图片
            {
                test:/\.(jpg|png|gif)/,
                use:[{
                    loader:"url-loader",
                    options:{
                        name:"[hash:6].[ext]",
                        outputPath:"img",
                        limit:10*1024
                    }
                }]
            },
             //处理其他资源
             {
                exclude:/\.(jpg|png|gif|html|css|less|js|vue)$/, // 少加入vue
                loader:"file-loader"
            },
            
          
            
        ]
    },
    // resolve:{ // resolve: 解决
    //     // 配置后缀名简写 导入的时候可以省略后缀名 import './a.vue' => import 'a'
    //     extensions:['.js','.vue','.css'],
    //     alias:{ // alias（别名）
    //         // 默认导入的是  vue/dist/vue.runtime.js
    //         // 用处 当导入vue的时候(import Vue from 'vue') 的时候  相当于导入 'vue/dist/vue.esm.js'  esm=>ESModule
    //         'vue$':'vue/dist/vue.esm.js'  
    //     }  
    // },
    // 开发环境
    devServer:{
        port:3000,
        open:true,
        contentBase:resolve(__dirname,"build"),
        hot:true
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new VueLoaderPlugin()
    ]
}